<template>
  <div class="page-one">
    <p>pdf.js demo</p>
    <!--本地-->
    <div style="margin-top: 10px">
      <p>本地</p>
      <button @click="check">点击</button>
      <button @click="checkLocal">点击一下</button>
    </div>
    <!--服务器-->
    <div style="margin-top: 30px">
      <p>服务器</p>
      <button @click="checkError">查看错误</button>
      <button @click="checkNormal">查看有效</button>
      <button @click="checkSuccess">查看服务器跨域返回流</button>
    </div>
    <!--上传文件-->
    <div style="margin-top: 40px">
      <input type="file" name="myfile" id="myfile" @change="preview($event)" />
      <!--<button @click="changeLocal">点击预览本地pdf</button>-->
      <!-- <iframe v-if="showPdf" id='previewPdf' :src="'/static/pdf/web/viewer.html?file=' + fileUrl" height="560"
                    width="100%">
                    
            </iframe> -->

    </div>

    <!--canvas-->
    <div style="margin-top: 30px;color: #70DB55">
      <span style="font-weight: 600" @click="checkContract">点我试试</span>
    </div>
    <div class="left-item">
      <vue-drag-resize class="item-ipt" :h="50" style="background:red">甲方——姓名</vue-drag-resize>
      <vue-drag-resize class="item-ipt" :h="50" :y="50" style="background:red">乙方——姓名</vue-drag-resize>
    </div>

    <md-contract :visible="contractVisable" :showBtns="true" @handleModal="close" class="md-cont">
    </md-contract>
    <div id="box2" style="height:200px;width:200px"></div>
    <div id="box3" style="height:200px;width:200px"></div>
  </div>
</template>

<script>
import mdContract from "./contract.md.vue";
import VueDragResize from "vue-drag-resize";
export default {
  name: "page-one",
  components: {
    mdContract,
    VueDragResize,
  },
  data() {
    return {
      fileUrl: "",
      showPdf: false,
      contractVisable: false,
    };
  },
  created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
    this.tuozhuai();
        // that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },
 
  methods: {
    tuozhuai() {
      var box2 = document.getElementById("box2");
      var box3 = document.getElementById("box3");
      var endpointX = box2.offsetLeft; //+200
      var endpointY = box2.offsetTop; //+300
      console.log("endPointX" + endpointX);
      console.log(document.getElementById("box2").clientWidth);
      $(".td1").each(function (index, item) {
        var id = $(this).attr("id");
        var td1 = document.getElementById(id);
        console.log("id+" + id);
        $(this).mousedown(function (e) {
          console.log($(this));
          var td = $(this);
          e.preventDefault();
          //      alert($(this).attr("id"));
          console.log("11111:" + e.clientX);
          document.onmouseover = function (e) {
            console.log("M:" + e.clientX);
            if (e.clientX > endpointX && e.clientX < endpointX + 800) {
              console.log("eventX:" + e.clientX);
              //                  console.log(index);
              td.attr("id", "tt" + id);
              //                  console.log("offsetP:" + td1.offsetWidth);
              $("#box3").append(td);
              $("#box3")
                .find("#tt" + id)
                .mousedown(function (e) {
                  var box = document.getElementById("#box" + id);
                  //                      console.log("boxOffset:"+box.offsetWidth);
                  e.preventDefault();
                  //                      alert($(this).attr("id"));
                  var evnt = e || event; // 得到鼠标事件
                  disX = evnt.clientX - td1.offsetLeft; // 鼠标横坐标 - div1的left
                  disY = evnt.clientY - td1.offsetTop; // 鼠标纵坐标 - div1的top

                  //                      console.log("box:"+box.offset().left);
                  // 鼠标移动时
                  document.onmousemove = function (e) {
                    var evnt = e || event;
                    var x = evnt.clientX - disX;
                    var y = evnt.clientY - disY;
                    var window_width =
                      document.getElementById("box2").clientWidth -
                      td1.offsetWidth;
                    var window_height =
                      document.getElementById("box2").clientHeight -
                      td1.offsetWidth;

                    x = x < 0 ? 0 : x; // 当div1到窗口最左边时
                    x = x > window_width ? window_width : x; // 当div1到窗口最右边时
                    y = y < 0 ? 0 : y; // 当div1到窗口最上边时
                    y = y > window_height ? window_height : y; // 当div1到窗口最下边时

                    //                          box.css({"left":x+'px',"top":y+'px'});

                    td1.style.left = x + "px";
                    td1.style.top = y + "px";
                  };

                  // 鼠标抬起时
                  document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouup = null;
                  };
                  return false;
                });
            }
          };
        });
      });
    },
    check() {
      window.open("/static/pdf/web/viewer.html");
    },
    checkLocal() {
      //          let url = '/static/pdf/web/demo.pdf'
      let url = "demo.pdf";
      window.open("/static/pdf/web/viewer.html?file=" + url);
    },
    checkError() {
      let url = "http://somedomain/doc/manuals/R-intro.pdf"; // 报错跨域
      window.open("/static/pdf/web/viewer.html?file=" + url);
    },
    checkNormal() {
      let url = "http://image.cache.timepack.cn/nodejs.pdf"; // 有效 服务器配置跨域处理
      window.open("/static/pdf/web/viewer.html?file=" + url);
    },
    checkSuccess() {
      // 后台返回流的形式，也是我本人项目的使用
      let url =
        "https://dluat.hscf.com/api/esm/v1/contractTemplates/load/c08def54aa40412b8b511406fc0271d2/0?access_token=ea19dc0de8801b389ed5099a2297161d&name=cehsi.pdf";
      // 当然上面的是可以的，但是此access_token 是有时效性的，只是放在这边当作个例子，至于最后我为什么加了个测试.pdf 是可以在浏览器标签叶上显示
      window.open(
        "/static/pdf/web/viewer.html?file=" + encodeURIComponent(url)
      );
    },
    // 这是打开本地文件进行预览
    preview(event) {
      let files = document.getElementById("myfile").files[0];
      if (files.type !== "application/pdf") {
        alert("只能上传一份pdf文件哦～");
        return;
      }
      this.showPdf = true;
      this.fileUrl = this.getObjectURL(files);
    },
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url;
    },
    checkContract() {
      this.contractVisable = !this.contractVisable;
    },
    close() {
      this.contractVisable = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page-one button {
  margin-left: 10px;
}
.md-cont {
  position: absolute;
  right: 5%;
  top: 0;
  height: 100%;
  width: 800px;
}
</style>
